<template>
<div id="detail">
  <detail-nav class="detail-nav" @itemclick="detclick" ref="nav"></detail-nav>
<!-- <scroll c>-->
  <scroll class="content" :pull-up-load="true" ref="scroll" @scroll="poscroll">
    <detail-swiper :banner="banner"></detail-swiper>
  <DetailBaseInfo :goods="goods"></DetailBaseInfo>
  <DetailShopInfo :shop="shop"></DetailShopInfo>
    <DetailGoodsInfo :detail-info="detaildate"  @imageLoad="imageLoad"></DetailGoodsInfo>
    <DetailParamInfo :param-info="paramInfo" ref="param"></DetailParamInfo>
    <DetailComment :comment-info="commentinfo" ref="comment"></DetailComment>
    <GoodList :goods="recommendinfo" ref="goodlist"></GoodList>
 </scroll>
  <DetailBottomBar @addCart="addCart"></DetailBottomBar>
  <back-top @click.native="topclick" v-show="isShow"/>
</div>
</template>

<script>
import DetailNav from "@/views/detail/childComps/DetailNav";
import {getdetaildata,Goods,Shop,GoodsParam,getrecommend} from "@/network/detail";
import {debounce} from "@/common/utils";
import DetailSwiper from "@/views/detail/childComps/detailSwiper";
import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
import scroll from "@/components/common/scroll/scroll";
import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
import DetailComment from "@/views/detail/childComps/DetailComment";
import GoodList from "@/components/content/goods/GoodList";
import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";
import BackTop from "@/components/content/backtop/BackTop";
import {mymixin} from "@/common/mixin";
import {mapActions} from 'vuex'

export default {
name: "Detail",
  components:{
    DetailSwiper,
  DetailNav,
    DetailBaseInfo,
    DetailShopInfo,
    scroll,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailComment,
    GoodList,
    DetailBottomBar,
    BackTop

  },
mixins:[mymixin],
  props:{

  },
  data(){
  return{
    iid:null,
    banner:[],
    goods:{},
    shop:{},
    detaildate:{},
    paramInfo: {},
    commentinfo:{},
    recommendinfo:[],
    detailscroll:[],
    getscroll:null,
    currentindex:0,
    isShow:false,
  }
  },
  created() {
  this.iid=this.$route.params.iid
   getdetaildata(this.iid).then(res=>{
     const data=res.result
     this.banner.push(...data.itemInfo.topImages)
     this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
     this.shop=new Shop(data.shopInfo)
     this.detaildate=data.detailInfo
     this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
     if(data.rate.cRate !== 0){
        this.commentinfo = data.rate.list[0]
      }
   })
  getrecommend().then(res=>{
    this.recommendinfo=res.data.list
  })
    this.getScroll=debounce(()=>{
      this.detailscroll.push(0)
      this.detailscroll.push(this.$refs.param.$el.offsetTop-44)
      this.detailscroll.push(this.$refs.comment.$el.offsetTop-44)
      this.detailscroll.push(this.$refs.goodlist.$el.offsetTop-44)
      this.detailscroll.push(Number.MAX_VALUE)
    })

  },
methods: {
      ...mapActions(['addCart']),
      imageLoad() {
        this.$refs.scroll.scroll.refresh()
        this.getScroll()
      },
      detclick(index){
        this.$refs.scroll.scrollTo(0,-this.detailscroll[index],100)
      },
      poscroll(position){
        let positiony=-position.y
        const length=this.detailscroll.length
        // for(let i=0;i<length;i++){
          // if(this.currrentindex!==i&&((i<length-1&&positiony>=this.detailscroll[i]&&positiony<this.detailscroll[i+1])
          // ||(i===length-1 &&positiony>=this.detailscroll[i]))){
          //   this.currrentindex=i
          // }
          // console.log(this.detailscroll)
        // }
        // if(this.currentindex!==0&&this.detailscroll[0]<positiony&&positiony<this.detailscroll[1]){
        //   this.currentindex=0
        // }
        // else if(this.currentindex!==1&&this.detailscroll[1]<positiony&&positiony<this.detailscroll[2]){
        //   this.currentindex=1
        //
        // }
        // else if(this.currentindex!==2&&this.detailscroll[2]<positiony&&positiony<this.detailscroll[3]){
        //   this.currentindex=2
        // }
        // else if(this.currentindex!==3&&this.detailscroll[3]<positiony){
        //   this.currentindex=3
        // }

        /////聪明做法：
        for(let i=0;i<length-1;i++){
          if(this.currentindex!==i&&(this.detailscroll[i]<positiony&&this.detailscroll[i+1]>positiony))
          {this.currentindex=i}
        }
        this.isShow=-position.y > 1000
        // console.log(this.currentindex)
        this.$refs.nav.currenindex=this.currentindex
      },
      topclick(){
        this.$refs.scroll.scrollTo(0,0,2000)
      },
      addCart(){
        const product={}
        product.image=this.banner[0];
        product.title=this.goods.title
        product.desc=this.goods.desc
        product.price=this.goods.realPrice;
        product.iid=this.$route.params.iid
        this.$store.dispatch('addCart',product).then(res=>{
         this.$toast.show(res,2000)
        })
        // this.addCart(product).then(res=>console.log(res))

      }

    },




}
</script>

<style scoped>
#detail{
  position: relative;
  z-index:11;
  background-color: #fff;
  height: 100vh;
}
.detail-nav{
  position: relative;
  z-index: 12;
  background-color: #fff;
}
.content{
  height: calc(100% - 44px);
}
</style>
